<template>
  <!-- 中间主体 -->
  <div class="content">
    <div class="left">
      <div class="flash">
        <ul id="img">
          <li>
            <el-carousel style="height: 400px">
              <el-carousel-item v-for="item in images" :key="item">
                <img :src="item" alt="" />
              </el-carousel-item>
            </el-carousel>
          </li>
        </ul>
      </div>
    </div>
    <router-view></router-view>
    <!-- 主体左边 -->
    <div class="left" style="margin-top: 25px">
      <div class="homelist">
        <div class="list1">
          <h3><a href="">SKATEBOARDING</a></h3>
          <div class="list1con">
            <div class="listblock">
              <div class="listimg">
                <img src="../../assets/img/timthumb.png" alt="" />
                <div class="date">六 01.2021</div>
                <a href=""><h4>Weekly Trick｜Inward Heelflip – Pikai</h4></a>
                <span
                  >&nbsp;众所周知 Inward Heelflip 是一个极其
                  别脚的动作，想做好这招除了双脚连贯配合之外，还需
                  要长时间地做针对性练习，快准狠的...</span
                >
              </div>
            </div>
            <div class="listblock">
              <div class="listimg">
                <img src="../../assets/img/timthumb.jpg" alt="" />
                <div class="date">六 01.2021</div>
                <a href=""
                  ><h4>Weekly Trick | Fakie Frontside Ollie – 大黑</h4></a
                >
                <span
                  >Fakie Frontside Ollie
                  是人人都学得会，但极少滑手才能真正展现其魅力的基础动作。那到底怎样才算一个完美的
                  Fak...</span
                >
              </div>
            </div>
            <div class="listblock">
              <div class="listimg">
                <img src="../../assets/img/timthumb (1).jpg" alt="" />
                <div class="date">六 01.2021</div>
                <a href=""
                  ><h4>
                    Weekly Trick｜Halfcab Noseslide Nollie Heelflip Out – 周登平
                  </h4></a
                >
                <span>
                  成都新生代滑手周登平不仅翻板精湛，台上的动作也细腻无比，在这个国内优秀滑手层出不穷的时代，他拥有一套属于自己的风格与动作。本期
                  We...</span
                >
              </div>
            </div>
            <div class="listblock">
              <div class="listimg">
                <img src="../../assets/img/timthumb (1).png" alt="" />
                <div class="date">六 01.2021</div>
                <a href=""
                  ><h4>Weekly Trick | FS 50-50 FS Pop Shove It – 祖丽</h4></a
                >
                <span>
                  Fs 50-50 Fs Pop Shove It
                  是个精细的连招动作，但在祖丽的娴熟操控下做到了无缝衔接。来自新疆，今年刚来上海开展...</span
                >
              </div>
            </div>
            <div class="listblock">
              <div class="listimg">
                <img src="../../assets/img/timthumb (2).png" alt="" />
                <div class="date">六 01.2021</div>
                <a href=""
                  ><h4>
                    Weekly Trick | FS No-comply 180 Pressure Heelflip –
                    Jasmine家敏
                  </h4></a
                >
                <span>
                  风格滑手总是被大家津津乐道的标签，有时做一个动作光是厉害是不帅的，只有风格到位了才叫帅。顺应
                  “风格” 主题，本期 Weekly T...</span
                >
              </div>
            </div>
            <div class="listblock">
              <div class="listimg">
                <img src="../../assets/img/timthumb (3).png" alt="" />
                <div class="date">六 01.2021</div>
                <a href=""
                  ><h4>Weekly Trick | Nollie Inward Heelflip – 正义</h4></a
                >
                <span>
                  高飘的 Nollie Inward Heelflip
                  在空中旋转仿佛自带慢放，精干的细腿朋克风格一下子带大家回到了国内早些年的滑板时光。...
                </span>
              </div>
            </div>
            <div class="listblock">
              <div class="listimg">
                <img src="../../assets/img/timthumb (4).png" alt="" />
                <div class="date">六 01.2021</div>
                <a href=""
                  ><h4>
                    Weekly Trick ｜Fakie Backside Nose Grind – Jason章
                  </h4></a
                >
                <span>
                  Jason章 可算是 Skatehere 的老朋友了，上次出镜在 Weekly Trick
                  栏目是七八年以前了。这么多年过去了，Ja...</span
                >
              </div>
            </div>
            <div class="listblock">
              <div class="listimg">
                <img src="../../assets/img/timthumb (5).png" alt="" />
                <div class="date">六 01.2021</div>
                <a href=""
                  ><h4>Weekly Trick | Varial Kickflip Sex Change – 白菜</h4></a
                >
                <span>
                  Varial Kickflip
                  是滑手们俗称的“尖翻小乱”同时也是适合新手上脚，老手稳固的精妙动作。本期
                  Weekly Trick...
                </span>
              </div>
            </div>
          </div>
        </div>
        <div class="list2">
          <h3><a href="">STREET FASHION</a></h3>
          <div class="list2con">
            <div class="listblock">
              <div class="listimg">
                <img src="../../assets/img/timthumb（6）.jpg" alt="" />
                <div class="date">六 03.2021</div>
                <a href=""
                  ><h4>
                    Vans Skateboarding 呈现：Cher Strauberry 为“酷儿”
                    们开创滑板空间
                  </h4></a
                >
                <span>
                  Vans Skateboarding 自豪地推出一部关于滑手、音乐家以及艺术家
                  Cher Straubery 的全新短片，讲述了她自...</span
                >
              </div>
            </div>
            <div class="listblock">
              <div class="listimg">
                <img src="../../assets/img/timthumb (7).jpg" alt="" />
                <div class="date">五 18.2021</div>
                <a href=""
                  ><h4>
                    Vans 首次联手 Boys of Summer LTD 推出联名职业滑板鞋
                  </h4></a
                >
                <span>
                  Vans
                  一直在寻找与真正的滑板品牌合作的新方式。凭借其众所周知的跨时代影响力，经典视频捕捉到的真正的滑板精神，Vans
                  本次很自豪...
                </span>
              </div>
            </div>
            <div class="listblock">
              <div class="listimg">
                <img src="../../assets/img/timthumb (8).jpg" alt="" />
                <div class="date">六 01.2021</div>
                <a href=""><h4>Vans Skate Classics 滑手实测｜李一鸣</h4></a>
                <span>
                  Logo 小标全面换新的 Vans Skate Classics
                  系列在鞋身的内外部也都做了全面升级，包括鞋身更加耐磨的材质以及
                  Pop Cush 缓震鞋垫...
                </span>
              </div>
            </div>
            <div class="listblock">
              <div class="listimg">
                <img src="../../assets/img/timthumb (9).jpg" alt="" />
                <div class="date">五 13.2021</div>
                <a href=""
                  ><h4>
                    Vans 与加拿大职业滑手 Breana Geering 联手推出全新鞋服系列
                  </h4></a
                >
                <span>
                  Vans，作为极限动作品牌元老与创意界标杆，这一次联手加拿大最具天赋滑手
                  Breana Geering，推出由 Skate Old ...
                </span>
              </div>
            </div>
            <div class="listblock">
              <div class="listimg">
                <img src="../../assets/img/timthumb(10).png" alt="" />
                <div class="date">五 08.2021</div>
                <a href=""><h4>缅怀传奇滑手和滑板文化守护者 Jeff Grosso</h4></a>
                <span>
                  为纪念 Jeff Grosso 的生日，Vans 将全新推出一期为 Jeff 制作的
                  《Love Letters To Skateb...</span
                >
              </div>
            </div>
            <div class="listblock">
              <div class="listimg">
                <img src="../../assets/img/timthumb (11).png" alt="" />
                <div class="date">四 30.2021</div>
                <a href=""
                  ><h4>新品开箱｜Vans 再次联手 Dime 打造 Skate Mid Skool</h4></a
                >
                <span>
                  Vans 再次与 Dime 联手，打造出一双全新 Vans Skate Mid
                  Skool。Vans 将 Dime 品牌标志性的黄色...
                </span>
              </div>
            </div>
            <div class="listblock">
              <div class="listimg">
                <img src="../../assets/img/timthumb (12).jpg" alt="" />
                <div class="date">四 29.2021</div>
                <a href=""
                  ><h4>
                    Vans品牌创始人Paul Van Doren回忆录 – 《Authentic》
                  </h4></a
                >
                <span>
                  “Paul
                  是鞋界真正具有远见的人，他很早就意识到这个世界的青年文化正开始从足球和棒球等传统运动转向滑板、冲浪、BMX
                  和单板滑雪等...
                </span>
              </div>
            </div>
            <div class="listblock">
              <div class="listimg">
                <img src="../../assets/img/timthumb (13).jpg" alt="" />
                <div class="date">四 28.2021</div>
                <a href=""
                  ><h4>国内得物APP首发 | EXIT X MAVEN 合作款即将发售</h4></a
                >
                <span>
                  EXIT
                  是一间成立于2019年的澳门滑板店，它旨在提升澳门滑板文化水平。BE
                  BOLD TO EXIT 是他们的口号，鼓励人们走出...
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 主体右边 -->
    <div class="right">
      <div id="vans">
        <a href=""
          ><img
            src="../../assets/img/190910_CN_SKATEBOARDING_SKOOL_SKATEHERO_240x400.jpg"
            alt=""
        /></a>
      </div>
      <div class="login">
        <a href="/login"><img src="../../assets/img/login.png" alt="" /></a>
      </div>
      <div>
        <a href=""
          ><img src="../../assets/img/levisbanner@20160204.jpg" alt=""
        /></a>
      </div>
      <div>
        <a href=""><img src="../../assets/img/ceping.jpg" alt="" /></a>
      </div>
      <div>
        <a href=""><img src="../../assets/img/fly.gif" alt="" /></a>
      </div>
      <div class="skaterplus">
        <a href=""><img src="../../assets/img/skaterplus.jpg" alt="" /></a>
      </div>
      <div class="styleplus">
        <a href=""><img src="../../assets/img/styleplus.jpg" alt="" /></a>
      </div>
      <div class="shotplus">
        <a href=""><img src="../../assets/img/shotplus.jpg" alt="" /></a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [
        require("../../assets/img/PC网站0506-04.jpg"),
        require("../../assets/img/200721_CN_Kyle-Pro-2_WEAR-TEST_680X400.jpg"),
        require("../../assets/img/190910_CN_SKATEBOARDING_SKOOL_SKATEHERO_680x400.jpg"),
        require("../../assets/img/2033_680x400.jpg"),
        require("../../assets/img/20201108_cn_qqjoy_680x400.jpg"),
      ],
    };
  },
};
</script>

<style scoped>
.wrapper {
  background-color: black;
  text-align: center;
}
.top {
  text-align: center;
  font-size: 18px;
}
.headline {
  position: absolute;
  top: 21px;
  left: 0;
  height: 13px;
  background: #000;
  width: 100%;
  z-index: 100;
}
.subject {
  width: 940px;
  margin: 0 auto 0;
  padding: 0 15px;
  background: #fff;
}
.content {
  overflow: hidden;
  width: 940px;
  position: relative;
  margin-top: 28px;
}

.navbar {
  border-bottom: 1px dashed #5a5758;
  margin-top: 10px;
  padding: 5px 0;
  position: absolute;
}

.nav .menu {
  width: 940px;
  float: left;
  display: table;
  zoom: 1;
  z-index: 200;
}
.menu li {
  float: left;
  margin: auto 45px;
}
.search {
  float: right;
  margin-top: -20px;
}
.search #s {
  background: url(../../assets/img/s.gif) left no-repeat;
  border: 1px solid #231f20;
  width: 170px;
  padding-left: 21px;
  height: 19px;
  float: left;
}
.search #submit {
  background: black;
  color: white;
  width: 25px;
  height: 21px;
}
.el-carousel-item {
  height: 400px;
  width: 680px;
  margin: 0;
}
.left {
  width: 680px;
  float: left;
  margin-top: 80px;
}
.img li {
  position: absolute;
  top: 100px;
}

.el-carousel__item {
  height: 400px !important;
}
.homelist {
  margin-top: 15px;
}
.homelist h3 {
  background: #000;
}
.homelist h3 a {
  color: #fff;
}
.homelist .list1 {
  float: left;
  width: 298px;
  border-right: 1px dashed #000;
  padding-right: 41px;
}

.homelist .list2 {
  float: left;
  width: 298px;
  padding-left: 41px;
}
.homelist span {
  width: 300px;
  display: inline-block;
  text-indent: 2em;
}
.homelist h4 {
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.listblock span {
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.list1con {
  margin-top: 14px;
  margin-left: 0px;
  overflow: hidden;
}
.list2con {
  margin-top: 14px;
  left: 0px;
  overflow: hidden;
}
.right {
  position: absolute;
  right: 0;
  top: 0;
}

#vans {
  margin-top: 80px;
}
.right a {
  float: right;
}
</style>

